<!--
 * @Author: zhangmengqiong
 * @Date: 2021-05-10 17:43:06
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-12 12:45:42
-->
<template>
  <div class="bottom-view">
    <el-row :gutter="20">
      <el-col :span="12"
        ><div class="view">
          <el-card shadow="hover">
            <template v-slot:header>
              <div class="title">关键词搜索</div>
            </template>
            <template>
              <div class="content">
                <div class="chart-wrapper">
                  <div class="chart">
                    <div class="chart-title">搜索用户数</div>
                    <div class="chart-data">93,634</div>
                    <v-chart :option="searchOption" />
                  </div>
                  <div class="chart">
                    <div class="chart-title">搜索量</div>
                    <div class="chart-data">198,782</div>
                    <v-chart :option="searchOption" />
                  </div>
                </div>
                <div class="table-wrapper">
                  <el-table :data="tableData" height="260">
                    <el-table-column prop="rank" label="排名" width="180" />
                    <el-table-column
                      prop="keyWord"
                      label="关键词"
                      width="180"
                    />
                    <el-table-column prop="count" label="总搜索量" />
                    <el-table-column prop="user" label="搜索用户数" />
                    <el-table-column prop="range" label="点击率" />
                  </el-table>
                  <el-pagination
                    background
                    small
                    layout="prev, pager, next"
                    :total="1000"
                  >
                  </el-pagination>
                </div>
              </div>
            </template>
          </el-card></div
      ></el-col>
      <el-col :span="12">
        <div class="view">
          <el-card shadow="hover">
            <template v-slot:header>
              <div class="title">分类销售排行</div>
              <div class="radio-group">
                <el-radio-group v-model="radioSelect" size="small">
                  <el-radio-button label="品类"></el-radio-button>
                  <el-radio-button label="商品"></el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <template>
              <div class="content">
                <v-chart :option="categroyOption" />
              </div>
            </template>
          </el-card></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BottomView",
  props: {
    msg: String
  },
  data() {
    return {
      searchOption: {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        yAxis: {
          type: "value",
          show: false
        },
        series: [
          {
            data: [901, 932, 845, 832, 640, 610, 400],
            type: "line",
            areaStyle: {},
            smooth: true,
            itemStyle: {
              opacity: 0
            }
          }
        ]
      },
      tableData: [
        {
          id: 1,
          rank: "1",
          keyWord: "古文",
          count: 1000,
          user: 900,
          range: " 90%"
        },
        {
          id: 2,
          rank: "3",
          keyWord: "美女",
          count: 1000,
          user: 900,
          range: " 90%"
        },
        {
          id: 3,
          rank: "6",
          keyWord: "汽车",
          count: 2000,
          user: 400,
          range: "25%"
        },
        {
          id: 4,
          rank: "9",
          keyWord: "美容",
          count: 2000,
          user: 800,
          range: "40%"
        },
        {
          id: 5,
          rank: "5",
          keyWord: "医疗",
          count: 800,
          user: 200,
          range: "25%"
        }
      ],
      radioSelect: "品类",
      categroyOption: {
        title: [
          {
            text: "品类分布",
            textStyle: {
              fontSize: "14px",
              color: "#666"
            },
            left: 20,
            top: 0
          },
          {
            text: "累计订单量",
            subtext: "320",
            x: "43.5%", // 移动到环形的位置
            y: "42.5%",
            textAlign: "center",
            textStyle: {
              fontSize: "14px",
              color: "#999"
            },
            subtextStyle: {
              fontSize: "24px",
              color: "#333"
            }
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            console.log(params, "pa33");
            const str = `${params.seriesName}</br>${params.data.name}-${params.data.value}`;
            return str;
          }
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 20,
          top: "center",
          textStyle: {
            fontSize: "14px",
            color: "#888"
          }
        },
        series: [
          {
            name: "品类分布",
            type: "pie",
            radius: ["55%", "70%"], // 就是画布的高度最小值，默认直径是75 比如画布200*180  那么默认直径就是 180*0.75
            center: ["45%", "50%"],
            avoidLabelOverlap: false,
            data: [
              { value: 1048, name: "粉面粥店" },
              { value: 735, name: "简餐便当" },
              { value: 580, name: "汉堡奶茶" },
              { value: 484, name: "小吃烧烤" },
              { value: 300, name: "新鲜水果" }
            ],
            label: {
              normal: {
                show: true,
                position: "outer",
                formatter: function(params) {}
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bottom-view {
  margin-top: 20px;
  width: 100%;
  .view {
    position: relative;
    .title {
      font-size: 14px;
      padding-left: 20px;
      align-items: center;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #eee;
      font-weight: 500;
      box-sizing: border-box;
    }
    .radio-group {
      position: absolute;
      right: 20px;
      top: 20px;
      text-align: center;
    }
    .content {
      height: 420px;
      width: 100%;
      margin-top: 20px;
      box-sizing: border-box;
      .chart-wrapper {
        display: flex;
        padding: 0 10px;

        .chart {
          flex: 1;
          width: 50%;
          padding: 0 10px;
          .chart-title {
            color: #999;
            font-size: 14px;
          }
          .chart-data {
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 22px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
      .table-wrapper {
        margin-top: 20px;
      }
    }
    .el-pagination {
      margin-top: 15px;
      text-align: right;
    }
  }
}
</style>
